<template>
		<div class="swiper tabs-swiper">
			<ol class="tabs swiper-wrapper">
					<li v-for="item in tabsList" :key="item.id" class="swiper-slide">
						<router-link to="/">
							<img :src="item.imgURL" />
							<p>{{item.title}}</p>
						</router-link>
					</li>
			</ol>
	</div>
</template>

<script>
	import {onMounted} from 'vue';
	import Swiper ,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	} from 'swiper';
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination]);
	
		export default{
			name:'Tabs',
			data(){
				return{
				tabsList:[
					{id:1,imgURL:require('@/assets/img/cc1.png'),title:'景点导航'},
					{id:2,imgURL:require('@/assets/img/cc2.png'),title:'商城'},
					{id:3,imgURL:require('@/assets/img/cc3.png'),title:'景点打开'},
					{id:4,imgURL:require('@/assets/img/cc4.png'),title:'美食'},
					{id:5,imgURL:require('@/assets/img/cc5.png'),title:'猫眼电影'},
					{id:6,imgURL:require('@/assets/img/cc6.png'),title:'购物'},
					{id:7,imgURL:require('@/assets/img/cc7.png'),title:'飞机'},
					{id:8,imgURL:require('@/assets/img/cc8.png'),title:'脚掌'},
					{id:9,imgURL:require('@/assets/img/cc9.png'),title:'钱包'},
					{id:10,imgURL:require('@/assets/img/cc10.png'),title:'爱心'},
					{id:11,imgURL:require('@/assets/img/cc11.png'),title:'添加好友'},
					{id:12,imgURL:require('@/assets/img/cc12.png'),title:'汽车租聘'},
				]
			}
			},setup(){
			onMounted( ()=>{ 
				new Swiper('.tabs-swiper' ,{
					slidesPerView : 4,
				})
			})
		}
			
			}
</script>

<style scoped>
	a{
		text-decoration: none;
		color: black;
	}
	.tabs{
		padding: 0.3rem 0;
	}
	.tabs li{
		float: left;
		width: 25%;
		text-align: center;
	}
	.tabs li img{
		width: 1rem;
		height: 1rem;
	}
	.tabs li p{
		padding: 0.2rem 0;
		font-size: 0.3rem;
	}
</style>
